<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--   引入axios网络请求库，用于发送请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--    进行参数处理的qs库-->
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
<!--    引入elementui所需要的资源-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<!--页面管理的父标签-->
<div id="app">

    订单号：
    <el-row>
    <el-col :span="12"><el-input v-model="alipayBean.out_trade_no" placeholder="请输入内容"></el-input></el-col>
    </el-row>
    <br/>
    商品名称：<el-input v-model="alipayBean.subject" placeholder="请输入内容"></el-input><br/>
    商品价格：<el-input v-model="alipayBean.total_amount" placeholder="请输入内容"></el-input><br/>
    商品描述：<el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="alipayBean.body">
    </el-input>

        <br/>
        <el-button type="primary" @click="goapply">去支付</el-button>

</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            //进行绑定支付数据对象
            alipayBean:{

                out_trade_no:"",
                subject:"",
                total_amount:null,
                body:"",
            }


        },
        methods:{
            //点击去支付时进行触发的方法
            goapply:function () {
                //将参数对象转换成字符串
                var ab=Qs.stringify(this.alipayBean);
                //使用axios请求库向后台发送post请求
                axios.post('http://localhost:8086/applydemo/order/alipay',ab).then(resp => {
                    //发送请求成功后的回调函数
                    // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                    const divForm = document.getElementsByTagName('div')
                    //判断页面是否存在该元素
                    if (divForm.length) {
                        //如果存在则删除
                        document.body.removeChild(divForm[0])
                    }
                    //创建元素
                    const div = document.createElement('div')
                    //将后台响应回来的数据,填写进行页面中进行回显(支付二维码)
                    div.innerHTML = resp.data // data就是接口返回的form 表单字符串
                    //将元素在页面中显示
                    document.body.appendChild(div)
                    document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                    document.forms[0].submit()
                })

            }

        }

    })




</script>

</body>
</html>